<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>计算器与拼图游戏</title>
		<meta name="description" content="">
		<meta name="keywords" content="">
		<link href="" rel="stylesheet">
		<script type="text/javascript" src="js/jquery1.42.min.js"></script>

		<style type="text/css">
			p { width: 420px; height: 100px; border: 10px solid #000000; border-bottom: 0 none; text-align: center; word-wrap:break-word; word-break:break-all; font-weight: bold; font-size: 20px; color: #000000; padding: 5px; margin: 50px auto 0px auto; }
			img { width: 100px; height: 100px; border: 5px solid #000000; margin: 0; padding: 0; cursor: pointer; }
			ul { font-size: 0; padding: 0; margin: 0; border: 0 none; list-style-type: none; }
			li { display: inline-block; width: 100px; height: 100px; border: 5px solid #000000; font-size: 48px; font-weight: bold; text-align: center; line-height: 100px; cursor: pointer; }
			.main { width: 450px; height: 560px; margin: 0px auto; position: relative; }
			.calculator { width: 440px; height: 550px; border: 5px solid #000000; font-size: 0; position: relative; display: none; }
			.calculator ul#quest { float: right; width: 330px; height: 110px; background: #339399; }
			.calculator ul#quest li { cursor: text; vertical-align: middle; }
			.calculator ul#operators { background: #993933; }
			.calculator ul#operators li { display: block; color: #FFFFFF; }
			.calculator ul#operators li:first-child +li +li +li, .calculator ul#operators li:first-child +li +li +li +li, .calculator ul#operators li:first-child +li +li +li +li +li, .calculator ul#operators li:first-child +li +li +li +li +li +li { display: inline-block; }
			.calculator ul#numbers { width: 330px; height: 330px; position: absolute; bottom: 110px; right: 0px; background: #888888; }
			.calculator ul#operators li:first-child +li +li +li +li +li { background: #888888; color: #000000; }
			.game { width: 440px; height: 550px; border: 5px solid #000000; font-size: 0;/* position: absolute;*/ left: 0px; top: 0px; overflow: hidden; }
			.game ul.top { float: right; width: 330px; height: 110px; background: #339399; }
			.game ul.top li { cursor: text; vertical-align: middle; }
			.game ul.buttons li { display: inline-block; color: #FFFFFF; background: #993933; vertical-align: middle; }
			.game ul.buttons li:first-child +li +li +li +li, .game ul.buttons li:first-child +li +li +li +li +li, .game ul.buttons li:first-child +li +li +li +li +li +li { display: block; }
			.game ul.blocks { width: 330px; height: 330px; background: url(img/huaji.jpg) center center no-repeat; -webkit-background-size: 100% 100%; background-size: 100% 100%; position: absolute; bottom: 5px; right: 5px; }
			.game ul.blocks li img { border: 0 none; }

		</style>
	</head>
	<body>
		<p></p>
		<div class="main">
			<div class="calculator">
				<img src="img/logo.png" alt="">
				<ul id="quest">
					<li>计</li>
					<li>算</li>
					<li>器</li>
				</ul>
				<ul id="operators">
					<li onclick="getOperator(this)">+</li>
					<li onclick="getOperator(this)">-</li>
					<li onclick="getOperator(this)">*</li>
					<li onclick="getOperator(this)">/</li>
					<li onclick="getResult()">=</li>
					<li onclick="getNumber(this)">0</li>
					<li onclick="clearButton()">CLR</li>
				</ul>
				<ul id="numbers">
					<li onclick="getNumber(this)">1</li>
					<li onclick="getNumber(this)">2</li>
					<li onclick="getNumber(this)">3</li>
					<li onclick="getNumber(this)">4</li>
					<li onclick="getNumber(this)">5</li>
					<li onclick="getNumber(this)">6</li>
					<li onclick="getNumber(this)">7</li>
					<li onclick="getNumber(this)">8</li>
					<li onclick="getNumber(this)">9</li>
				</ul>
			</div>
			<div class="game">
				<img src="img/logo.png" alt="">
				<ul class="top">
					<li>拼</li>
					<li id="reset"><img src="img/huaji.jpg" style="width: 100; height: 100; border: 0 none;" alt=""></li>
					<li>图</li>
				</ul>
				<ul class="buttons">
					<li id="start">戳</li>
					<li onclick="move('up',1)">D1</li>
					<li onclick="move('up',2)">D2</li>
					<li onclick="move('up',3)">D3</li>
					<li onclick="move('left',1)">L1</li>
					<li onclick="move('left',2)">L2</li>
					<li onclick="move('left',3)">L3</li>
				</ul>
				<ul class="blocks">
					<li imgNo="0"><img src="img/1.jpg" alt=""></li>
					<li imgNo="1"><img src="img/2.jpg" alt=""></li>
					<li imgNo="2"><img src="img/3.jpg" alt=""></li>
					<li imgNo="3"><img src="img/4.jpg" alt=""></li>
					<li imgNo="4"><img src="img/5.jpg" alt=""></li>
					<li imgNo="5"><img src="img/6.jpg" alt=""></li>
					<li imgNo="6"><img src="img/7.jpg" alt=""></li>
					<li imgNo="7"><img src="img/8.jpg" alt=""></li>
					<li imgNo="8"><img src="img/9.jpg" alt=""></li>
				</ul>
			</div>
		</div>
	</body>
	<script type="text/javascript">
//--Calculator
		var a = 0;
		var b = 0;
		var displayBox =  document.getElementsByTagName('p')[0];
		var arrOperators = document.getElementById('operators').getElementsByTagName('li');
		var arrNumbers = document.getElementById('numbers').getElementsByTagName('li');
		var arrStrN = new Array;
		var arrStrO = new Array;
		var strResult = '';
		document.getElementsByTagName('img')[1].onclick = function (){
			document.getElementsByClassName('game')[0].style.display = 'none';
			document.getElementsByClassName('calculator')[0].style.display = 'block';
		};
		function getNumber(number){
			arrStrN[a] = number.innerText;
			strResult += arrStrN[a];
			displayBox.innerHTML = strResult;
			a++;
		};
		function getOperator(operator){
			arrStrO[b] = operator.innerText;
			strResult += arrStrO[b];
			displayBox.innerHTML = strResult;
			b++;
		};
		function getResult(){
			displayBox.innerHTML = eval(strResult);
			strResult = displayBox.innerHTML;
		};
		function clearButton(){
			a = 0;
			b = 0;
			nQuest = 0;
			strResult = '';
			displayBox.innerHTML = '';
		};
//--Game
		var resetButton = document.getElementById('reset');
		var startButton = document.getElementById('start');
		var objBlock = document.getElementsByClassName('blocks')[0];
		var arrBlocks = objBlock.getElementsByTagName('li');
		var z;
		var btR = true;
		var nTrue = 0;
		document.getElementsByTagName('img')[0].onclick = function (){
			document.getElementsByClassName('game')[0].style.display = 'block';
			document.getElementsByClassName('calculator')[0].style.display = 'none';
		};
		startButton.onclick = function (){
			btR = false;
			for (var i = 0; i < arrBlocks.length; i++){
				arrBlocks[i].style.opacity = 1;
			};
			for (var i = 0; i < 9; i++){
				z = Math.ceil(Math.random()*10)%3;
				Math.random()<0.5 ? move('left',(z+1)) : move('up',(z+1));
			};
			btR = true;
		};

		resetButton.onclick = function(){
			for (var i = 0; i < arrBlocks.length; i++) {
				arrBlocks[i].innerHTML = '<img src="img/'+(i+1)+'.jpg" alt="">';
				arrBlocks[i].style = '';
			};
		};
		function move(m,n){
			switch(m){
				case 'left':
					objBlock.appendChild(arrBlocks[(n-1)*3]);
					for (var i = n*3; i < 9; i++){
						objBlock.appendChild(arrBlocks[1+Math.pow(n,2)]);
					};
					break;
				case 'up':
					for (var i = 0; i < 2; i++){
						objBlock.appendChild(arrBlocks[n+2]);
						for (var t = 0; t < 2; t++){
							objBlock.appendChild(arrBlocks[n]);
						};
					};
					for (var i = 0; i < (4-n); i++){
						objBlock.appendChild(arrBlocks[n-1]);
					};
					break;
			};
			if (btR == true){
				detection();
			}
		};
		if (btR == true) {
			function detection(){
				nTrue = 0;
				for (var i = 0; i < 9; i++){
					if (arrBlocks[i].innerHTML == '<img src="img/'+(i+1)+'.jpg" alt="">'){
						nTrue++;
					};
				};
				if (nTrue == 9){
					for (var i = 0; i < arrBlocks.length; i++){
						time = setTimeout('arrBlocks['+i+'].style.visibility = "hidden"', i*500);
					};
					clearTimeout(time);
				};

			};
		};























	</script>
</html>

<!-- 废案 -->
<!-- 					switch(n) {
						case 1:
							objBlock.appendChild(arrBlocks[0]);
							for (var i = 3; i < 9; i++) {
								objBlock.appendChild(arrBlocks[2]);
							}
							break;
						case 2:
							objBlock.appendChild(arrBlocks[3]);
							for (var i = 6; i < 9; i++) {
								objBlock.appendChild(arrBlocks[5]);
							}
							break;
						case 3:
							objBlock.appendChild(arrBlocks[6]);
							break;
					}
					switch(n) {
						case 1:
							for (var i = 0; i < 2; i++) {
								objBlock.appendChild(arrBlocks[3]);
								objBlock.appendChild(arrBlocks[1]);
								objBlock.appendChild(arrBlocks[1]);
							};
							for (var i = 0; i < 3; i++) {
								objBlock.appendChild(arrBlocks[0]);
							}
							break;
						case 2:
							// objBlock.appendChild(arrBlocks[0]);
							for (var i = 0; i < 2; i++) {
								objBlock.appendChild(arrBlocks[4]);
								objBlock.appendChild(arrBlocks[2]);
								objBlock.appendChild(arrBlocks[2]);
							}
							for (var i = 0; i < 2; i++) {
								objBlock.appendChild(arrBlocks[1]);
							}
							break;
						case 3:
							// objBlock.appendChild(arrBlocks[0]);
							for (var i = 0; i < 2; i++) {
								objBlock.appendChild(arrBlocks[5]);
								objBlock.appendChild(arrBlocks[3]);
								objBlock.appendChild(arrBlocks[3]);
							}
							for (var i = 0; i < 1; i++) {
								objBlock.appendChild(arrBlocks[2]);
							}
							break;
					} -->
<!-- 		var arrR1 = objBlock.getElementsByClassName('R1');
		var arrR2 = objBlock.getElementsByClassName('R2');
		var arrR3 = objBlock.getElementsByClassName('R3');
		var arrD1 = objBlock.getElementsByClassName('D1');
		var arrD2 = objBlock.getElementsByClassName('D2');
		var arrD3 = objBlock.getElementsByClassName('D3'); -->
<!-- 		function move(m,n){
			switch(m) {
				case 'left':
					eval("arrR"+n).unshift(eval("arrR"+n)[2]);
					eval("arrR"+n).pop();
					for (var i = 0; i < 3; i++) {
						eval("arrR"+n)[i].innerHTML = n+'-'+(i+1);
						eval("arrD"+(i+1)).shift();
						eval("arrD"+(i+1)).unshift(eval("arrR"+n)[i]);
					};
					console.log(eval("arrR"+n));
					console.log(eval("arrD"+n));
					break;
				case 'up':
					eval("arrD"+n).unshift(eval("arrD"+n)[2]);
					eval("arrD"+n).pop();
					for (var i = 0; i < 3; i++) {
						eval("arrD"+n)[i].innerHTML = (i+1)+'-'+n;
						eval("arrR"+(i+1)).shift();
						eval("arrR"+(i+1)).unshift(eval("arrD"+n)[i]);
					};
					break;
			}
		}

		var distX0 = [0,0,0];
		var distX1 = [0,0,0];
		var distX2 = [0,0,0];
		var distX3 = [0,0,0];
		var distY0 = [0,0,0];
		var distY1 = [0,0,0];
		var distY2 = [0,0,0];
		var distY3 = [0,0,0];
		var T;
		var k;
		var roundL = 0;
		var roundD = 0;
		var strRD;
		var strN;

		function move(m,n){
			switch(m) {
				case 'left':
					strRD = 'R';
					strN = 'D';
					for (var t = 0; t < 3; t++) {
						eval("arr"+strN+(t+1))[n-1].style.transform += 'translateY('+eval(-"distY"+n)[t]+'px)';
					};
					break;
				case 'up':
				 	strRD = 'D';
				 	strN = 'R';
				 	for (var t = 0; t < 3; t++) {
						eval("arr"+strN+(t+1))[n-1].style.transform += 'translateX('+eval(-"distX"+n)[t]+'px)';
					};
					break;
			 };
			for (var i = 0; i < 3; i++) {
				switch(i) {
					case 0:
						k = 3;
						distX0[(n-1)] = distX1[(n-1)];
						distY0[(n-1)] = distY1[(n-1)];
						distX1[(n-1)] = distX2[(n-1)];
						distY1[(n-1)] = distY2[(n-1)];
						m == 'left' ? distX1[(n-1)] += 220 : distY1[(n-1)] += 220;
						break;
					case 1:
						k = 1;
						distX2[(n-1)] = distX3[(n-1)];
						distY2[(n-1)] = distY3[(n-1)];
						m == 'left' ? distX2[(n-1)] += -110 : distY2[(n-1)] += -110;
						break;
					case 2:
						k = 2;
						distX3[(n-1)] = distX0[(n-1)];
						distY3[(n-1)] = distY0[(n-1)];
						m == 'left' ? distX3[(n-1)] += -110 : distY3[(n-1)] += -110;
						break;
				};
				eval("arr"+strRD+n)[i].style.transform = 'translate('+eval("distX"+(i+1)+"["+(n-1)+"]")+'px,'+eval("distY"+(i+1)+"["+(n-1)+"]")+'px)';
				eval("arr"+strRD+n)[i].classList.remove(strN+(i+1));
				eval("arr"+strRD+n)[i].classList.add(strN+k);
			};
					var xNR = eval("arr"+strRD+n)[0];
					eval("arr"+strRD+n)[0] = eval("arr"+strRD+n)[1];
					eval("arr"+strRD+n)[1] = eval("arr"+strRD+n)[2];
					eval("arr"+strRD+n)[2] = xNR;
					for (var t = 0; t < 3; t++) {
						eval("arr"+strN+(t+1))[n-1] = eval("arr"+strRD+n)[t];
					};
		};
						eval("distY"+(t+1))[n-1] = (n-1)*110;
			switch(m){
				case 'left':
					break;
				case 'up':
					var xNR = eval("arr"+strRD+n)[0];
					eval("arr"+strRD+n)[0] = eval("arr"+strRD+n)[1];
					eval("arr"+strRD+n)[1] = eval("arr"+strRD+n)[2];
					eval("arr"+strRD+n)[2] = xNR;
					for (var t = 0; t < 3; t++) {
						eval("arr"+strN+(t+1))[n-1] = eval("arr"+strRD+n)[t];
						// eval("distX"+(t+1))[n-1] = (n-1)*110;
					};
					break;
			};
			console.log(arrR1);
			console.log(arrD1);




			if(m == 'left'){
			}else{
				var xNR = eval("arr"+strRD+n)[0];
				eval("arr"+strRD+n)[0] = eval("arr"+strRD+n)[2];
				eval("arr"+strRD+n)[2] = eval("arr"+strRD+n)[1];
				eval("arr"+strRD+n)[1] = xNR;
			console.log(eval("arr"+strRD+n));
			console.log(eval("arr"+strN+n));
			}
		if (roundL>=3) {
			roundL = 0;
			eval("arrR"+n)[0].setAttribute('style','');
			eval("arrR"+n)[1].setAttribute('style','');
			eval("arrR"+n)[2].setAttribute('style','');
		}else if (roundD>=3) {
			roundD = 0;
			eval("arrD"+n)[0].setAttribute('style','');
			eval("arrD"+n)[1].setAttribute('style','');
			eval("arrD"+n)[2].setAttribute('style','');
		}
		
		
		eval("arr"+strRD+n)[0].style.transform += 'translate'+strXY+'('+distance*2+'px)';
		eval("arr"+strRD+n)[0].classList.remove(strReverse+'1');
		eval("arr"+strRD+n)[0].classList.add(strReverse+'3');
		eval("arr"+strRD+n)[1].style.transform += 'translate'+strXY+'('+(-distance)+'px)';
		eval("arr"+strRD+n)[1].classList.remove(strReverse+'2');
		eval("arr"+strRD+n)[1].classList.add(strReverse+'1');
		eval("arr"+strRD+n)[2].style.transform += 'translate'+strXY+'('+(-distance)+'px)';
		eval("arr"+strRD+n)[2].classList.remove(strReverse+'3');
		eval("arr"+strRD+n)[2].classList.add(strReverse+'2');
		
		
		function up(n){
			eval("arrD"+n)[0].style.transform += 'translateY(110px)';
			eval("arrD"+n)[0].classList.remove('R1');
			eval("arrD"+n)[0].classList.add('R2');
			eval("arrD"+n)[1].style.transform += 'translateY(110px)';
			eval("arrD"+n)[1].classList.remove('R2');
			eval("arrD"+n)[1].classList.add('R3');
			eval("arrD"+n)[2].style.transform += 'translateY(-220px)';
			eval("arrD"+n)[2].classList.remove('R3');
			eval("arrD"+n)[2].classList.add('R1');
			eval("var xND = arrD"+n+"[0]");
			eval("arrD"+n+"[0] = arrD"+n+"[2]");
			eval("arrD"+n+"[2] = arrD"+n+"[1]");
			eval("arrD"+n+"[1] = xND");
			eval("arrR1["+(n-1)+"]=arrD"+n+"[0]");
			eval("arrR2["+(n-1)+"]=arrD"+n+"[1]");
			eval("arrR3["+(n-1)+"]=arrD"+n+"[2]");
			eval("D"+n+"=2");
			D++;
			
			
			if (D>=3) {
				D = 0;
				eval("arrD"+n)[0].setAttribute('style','transform:translate-y(0px)');
				eval("arrD"+n)[1].setAttribute('style','transform:translate-y(0px)');
				eval("arrD"+n)[2].setAttribute('style','transform:translate-y(0px)');
			}
		};

		var nQuest = 0;
		var arrQuest = document.getElementById('quest').getElementsByTagName('li');
		arrQuest[0].innerHTML = '九';
		arrQuest[1].innerHTML = '宫';
		arrQuest[2].innerHTML = '格';
		function getRandom() {
			x = Math.random();
			if (x>=0.95){x = 0;};
			x = Math.round(x*10);
		};
		document.getElementsByTagName('img')[0].onclick = function (){
			getRandom();
			arrQuest[0].innerHTML = x;
			nQuest = x*100;
			getRandom();
			arrQuest[1].innerHTML = x;
			nQuest += x*10;
			getRandom();
			arrQuest[2].innerHTML = x;
			nQuest += x;
			if (nQuest == 0){getRandom();};
		}; -->
